<template>
  <div class="prod-edit">
    <!--  -->
    <van-nav-bar title="商品编辑" right-text="完成" @click-left="router.go(-1)" @click-right="handleSubmit" fixed placeholder>
      <template #left><van-icon name="arrow-left" size="18" color="#333" /></template>
    </van-nav-bar>

    <!--  -->
    <div class="title-item">{{detail.title}}</div>

    <van-cell center title="商品短标题">
      <template #label>
        <van-field v-model="detail.userTitle" placeholder="可设置短标题"  />
      </template>
    </van-cell>
    <van-cell center title="商品分类" :label="detail.sysCategory" is-link to="prodClassify" />
  </div>
</template>

<script>
import { reactive } from 'vue'
import { Toast } from 'vant'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { addProductToMyShop } from '@api'

export default {
  setup () {
    const router = useRouter()
    const store = useStore()
    const { detail: info } = store.state.prod
    const detail = reactive(info)
    const handleSubmit = () => {
      console.log(detail)
      const { pdId, sysCategoryId: categoryId, userTitle: title, userProductId } = detail
      addProductToMyShop({
        pdId,
        categoryId,
        title,
        userProductId
      }).then(res => {
        console.log(res)
        Toast('按钮')
      })
    }
    return {
      router,
      detail,
      handleSubmit
    }
  }
}
</script>

<style scoped lang="scss">
@import './prodEdit.scss';
</style>
